<template>
    <div class="table-container">
        <!-- 表头 -->
        <div class="header">
            <div v-for="column in columns" :key="column.id" class="cell">{{ column.name }}</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div v-for="item in data" :key="item.id" class="row">
                <div v-for="(value, key) in item" :key="key" class="cell">{{ value }}</div>
            </div>
        </div>
    </div>
</template>
   
<script>
export default {
    name: 'Table',
    props: ['data'], // 传入的数据源

    computed: {
        columns() {
            if (this.data && this.data[0]) {
                return Object.keys(this.data[0]).map((key) => ({ id: key, name: key }));
            } else {
                return [];
            }
        },
    },
};
</script>
   
<style scoped>
/* CSS样式 */
.table-container {
    display: flex;
}

.header .cell {
    width: 80px;
    /* 设置每个单元格的宽度 */
    /* background-color: #f5f7fa; */
    padding: 2px;
}
.content{
    display: flex;
}

.content .row {
    margin-top: 4px;
}

.content .cell {
    width: 100px;
    padding: 2px;
}
</style>